/*--
    - JSGrid
--------------------------------------*/

/*Sorting Panel*/
.jsGrid-sorting-panel {
    max-width: 300px;
    margin-bottom: 15px;
    & div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        & .form-control {
            width: auto;
            margin: 0 5px;
        }
        & .button {
            padding: 6px 15px;
            margin: 0;
        }
    }
}

/*JSGrid*/
.jsgrid {
    height: auto !important;
    & .jsgrid-button {
        padding: 0;
        position: relative;
        top: 4px;
        margin: 0 3px;
    }
}

/*JSGrid Header*/
.jsgrid-grid-header {
    border: 1px solid #dee2e6;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    & table {
        & tr {
            & th, & td {
                padding: 0.75em;
                vertical-align: middle;
                & input, & select {
                    @extend .form-control;
                    padding: 7px 20px;
                    &[type="number"] {
                        padding: 7px 10px;
                    }
                }
                & select {
                    padding: 6px 35px 6px 10px !important;
                }
                &.jsgrid-header-sort {
                    &::before {
                        margin-top: 9px;
                    }
                    &.jsgrid-header-sort-asc {
                        &::before {
                            border-color: transparent transparent $primary;
                        }
                    }
                    &.jsgrid-header-sort-desc {
                        &::before {
                            border-color: $primary transparent transparent;
                        }
                    }
                }
            }
        }
    }
}

/*JSGrid Body*/
.jsgrid-grid-body {
    height: auto !important;
    overflow: auto;
    & table {
        & tbody {
            & tr {
                & th, & td {
                    padding: 0.75em;
                    border-color: #dee2e6;
                    vertical-align: middle;
                    &.jsgrid-align-right {
                        text-align: center;
                    }
                }
                &:last-child {
                    & td {
                        border-bottom: none;
                    }
                }
            }
        }
    }
}
